<template>
  <div class="dashboard-container">
    <div>
      欢迎回来 {{ name }}，上次登录时间是：{{ lastTime }}
    </div>
    <!-- 负责的班级 -->
    <el-row style="display: flex;">
      <el-col :span="20" style="text-align: left;">
        <div class="dashboard-text">负责的班级({{ directorClass.length }})</div>
      </el-col>
      <el-col :span="4" style="text-align: right; display: flex; align-items: end; justify-content: end; margin-bottom: 10px;">
        <el-button type="primary" @click="openAddClass()">添加负责班级</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading.classLoading" :data="directorClass" border style="width: 100%" max-height="275">
      <el-table-column fixed prop="classCode" label="班级代码" width="180" />
      <el-table-column prop="name" label="班级名称" width="180" />
      <el-table-column prop="type" label="班级性质" />
      <el-table-column prop="desc" label="班级介绍" />
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewClassHandler(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="editClassHandler(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 课程 -->
    <el-row style="display: flex; margin-top: 30px;">
      <el-col :span="20" style="text-align: left;">
        <div class="dashboard-text">系统课程({{ systemCourses.total }})</div>
      </el-col>
      <el-col :span="4" style="text-align: right; display: flex; align-items: end; justify-content: end; margin-bottom: 10px;">
        <el-button type="primary" @click="openAddCourses()">添加课程</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading.classLoading" :data="systemCourses.data" border style="width: 100%" max-height="350">
      <el-table-column fixed prop="name" label="课程名称" width="180" />
      <el-table-column prop="type" label="课程性质" width="180" />
      <el-table-column prop="desc" label="课程简介" />
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="bindingCoursesHandler(scope.row)">绑定</el-button>
          <el-button type="text" size="small" @click="editCoursesHandler(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 操作框 -->
    <el-dialog :title="operaTitle" :visible.sync="operaShow" :close-on-click-modal="false">
      <!-- 新增/编辑班级 -->
      <el-form v-if="operaMode === 0 || operaMode === 1" :model="form">
        <el-form-item label="班级编号">
          <el-input v-model="form.classCode" autocomplete="off" :minlength="7" :maxlength="7" show-word-limit placeholder="输入7位整数" />
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="form.name" autocomplete="off" placeholder="输入班级名称" />
        </el-form-item>
        <el-form-item label="班级简介">
          <el-input v-model="form.desc" autocomplete="off" placeholder="输入班级简介" />
        </el-form-item>
        <el-form-item label="班级类型">
          <el-input v-model="form.type" autocomplete="off" placeholder="输入班级类型" />
        </el-form-item>
      </el-form>
      <!-- 绑定班级 -->
      <el-select v-if="operaMode === 2" v-model="bindingClassId" filterable placeholder="请选择" style="width:100%; text-align: center;">
        <el-option
          v-for="item in directorClass"
          :key="item.id"
          :label="`${item.name}`"
          :value="item.id"
        />
      </el-select>
      <!-- 修改课程 -->
      <el-form v-if="operaMode === 3 || operaMode === 4" :model="coursesForm">
        <el-form-item label="课程名称">
          <el-input v-model="coursesForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程性质">
          <el-input v-model="coursesForm.type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input v-model="coursesForm.desc" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operaShow = false">取 消</el-button>
        <el-button type="primary" @click="operaConfirmHandler()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { classlist } from '@/api/common'
import { createClass, editClass } from '@/api/class'
import { list, edit, create } from '@/api/courses'
import { Message } from 'element-ui'

export default {
  name: 'Dashboard',
  data() {
    return {
      // 列表加载
      loading: {
        classLoading: true,
        coursesLoading: true
      },
      // 负责的班级
      directorClass: [],
      // 系统的课程
      systemCourses: {},
      // 操作框操作类型
      operaMode: 0,
      // 操作框操作显隐
      operaShow: false,
      operaTitle: '新增负责班级',
      // 班级表单
      form: {
        directorsUserId: 0,
        classCode: '',
        name: '',
        desc: '',
        type: ''
      },
      // 课程表单
      coursesForm: {
        coursesId: 0,
        name: '',
        type: '',
        desc: ''
      },
      // 分页配置
      pagination: {
        // 课程分页
        courses: {
          page: 0,
          limit: 10
        }
      },
      // 绑定的班级 id
      bindingClassId: null,
      // 临时对象
      tempObj: {}
    }
  },
  computed: {
    ...mapGetters([
      'name', 'lastTime', 'classname', 'userId'
    ])
  },
  mounted() {
    // 负责人加载班级信息
    this.getClassList()
    // 获取系统的课程
    this.getSystemCourses()
    // 初始化负责人表单信息
    this.form.directorsUserId = this.userId
    console.log(this.$store)
  },
  methods: {
    /**
     * 打开追加班级
     */
    openAddClass() {
      this.operaMode = 0
      this.operaTitle = '新增负责班级'
      this.form = {
        classId: undefined,
        directorsUserId: this.userId,
        classCode: '',
        name: '',
        desc: '',
        type: ''
      }
      this.operaShow = true
    },
    /**
     * 打开追加课程
     */
    openAddCourses() {
      this.operaMode = 4
      this.operaTitle = '新增课程'
      this.coursesForm = {
        coursesId: null,
        name: '',
        type: '',
        desc: ''
      }
      this.operaShow = true
    },
    /**
     * 获取班级列表
     */
    getClassList() {
      this.loading.classLoading = true
      classlist().then(res => {
        this.directorClass = res.data
      }).finally(() => {
        this.loading.classLoading = false
      })
    },
    /**
     * 获取系统现有的课程
     * @param {表单行} row
     */
    getSystemCourses() {
      const data = {
        page: this.pagination.courses.page,
        limit: this.pagination.courses.limit
      }
      this.loading.coursesLoading = true
      list(data).then(res => {
        this.systemCourses = res.data
      }).finally(() => {
        this.loading.coursesLoading = false
      })
    },

    /**
     * 查看班级
     * @param {*} row
     */
    viewClassHandler(row) {
      this.$router.push(
        {
          name: 'ClassDetail',
          params: {
            id: row.id
          }
        }
      )
    },
    /**
     * 编辑班级
     * @param {*} row
     */
    editClassHandler(row) {
      this.form = { ...row }
      this.form.classId = row.id
      this.operaMode = 1
      this.operaTitle = '编辑负责班级'
      this.operaShow = true
    },
    /**
     * 操作确认
     * <p>根据不同的 operaMode 来确认操作的方式</p>
     */
    operaConfirmHandler() {
      if (this.operaMode === 0) {
        createClass(this.form).then(res => {
          this.getClassList()
          Message({
            message: '添加班级成功',
            type: 'success',
            duration: 5 * 1000
          })
        }).finally(() => {
          this.operaShow = false
        })
      } else if (this.operaMode === 1) {
        editClass(this.form).then(res => {
          this.getClassList()
          Message({
            message: '修改班级信息成功',
            type: 'success',
            duration: 5 * 1000
          })
        }).finally(() => {
          this.operaShow = false
        })
      } else if (this.operaMode === 2) {
        // 绑定课程至班级
        const data = {
          classId: this.bindingClassId,
          coursesId: this.tempObj.coursesId
        }
        edit(data).then(() => {
          Message({
            message: '绑定成功',
            type: 'success',
            duration: 5 * 1000
          })
        }).finally(() => {
          this.operaShow = false
        })
      } else if (this.operaMode === 3) {
        // 绑定课程至班级
        edit(this.coursesForm).then(() => {
          Message({
            message: '编辑成功',
            type: 'success',
            duration: 5 * 1000
          })
          // 重新获取课程
          this.getSystemCourses()
        }).finally(() => {
          this.operaShow = false
        })
      } else if (this.operaMode === 4) {
        // 新增课程
        create(this.coursesForm).then(() => {
          Message({
            message: '新增成功',
            type: 'success',
            duration: 5 * 1000
          })
          // 重新获取课程
          this.getSystemCourses()
        }).finally(() => {
          this.operaShow = false
        })
      }
    },
    /**
     * 绑定课程
     * @param {表格行数据} row
     */
    bindingCoursesHandler(row) {
      this.operaMode = 2
      this.bindingClassId = null
      this.operaTitle = `绑定【${row.name}】课程`
      this.operaShow = true
      // 将课程 id 存储至临时值当中
      this.tempObj.coursesId = row.coursesId
    },
    /**
     * 修改课程
     * @param {表格行数据} row
     */
    editCoursesHandler(row) {
      // 清空表单
      this.coursesForm = {
        coursesId: row.coursesId,
        name: row.name,
        type: row.type,
        desc: row.desc
      }
      this.operaMode = 3
      this.operaTitle = '修改课程'
      this.operaShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    color: #b598a1;
    font-size: 24px;
    line-height: 46px;
    margin: 10px 0 10px 0;
  }
}
</style>
